<template>
  <view class="acme-refresh" :style="{background}">
    <view class="container" :style="[{ background, transform, transition, marginTop: `${-refreshHeight}px` }]" 
      @touchstart="touchstart" 
      @touchmove="touchmove" 
      @touchend="touchend"
    >
      <!-- 刷新区域 -->
      <view class="refresh-wrap" :style="{'--color': color, height: `${refreshHeight}px`}"
      >
        <view class="refresh" :style="{height: `${refreshHeight}px`}">
          <div class="loading"></div>
          <view v-show="!playState" class="text">
            {{moving ? '松开刷新' : '下拉刷新'}}
          </view>
          <view v-show="playState" class="text">
            刷新中
          </view>
        </view>
      </view>
      
      <!-- 内容 -->
      <view class="content">
      	<slot name="container"></slot>
      </view>
    </view>
    
    <!-- <view class="tx">
      {{transform}}
    </view> -->
  </view>
</template>

<script>
  export default {
    name: 'AcmeRefresh',
    props: {
      scrollTop: {
        type: Number,
        default: 0
      },
      fixedHeight: {
        type: String,
        default: '0'
      },
      color: {
        type: String,
        default: '#CCCCCC'
      },
      background: {
        type: String,
        default: 'transparent'
      },
      refreshHeight: {
        type: Number,
        default: 80
      }
    },
    data() {
      return {
        startY: 0,
        updating: false, // 数据更新状态（true: 更新中）
        moving: false,
        transform: 'translateY(0px)',
        transition: '0s',
        playState: false, // 动画的状态 暂停 paused/开始 running
        moveDistance: 0,
        isBottom: false,
        release: false, // 释放 ｜ 下拉取消
      }
    },
    methods: {
      touchstart(e) {
        this.transition = 'transform .1s ease'
        this.startY = e.touches[0].clientY
      },
      touchmove(e) {
        let moveDistance = e.touches[0].clientY - this.startY
        
        if(this.scrollTop > 0 || this.release) {
          return
        }
        
        if (moveDistance <= this.refreshHeight) {
          this.moveDistance = moveDistance
          this.setTransform(moveDistance)
        }
        
        if(moveDistance >= this.refreshHeight) {
          if(this.release) {
            return
          }
          this.moving = moveDistance
          this.setTransform(this.refreshHeight)
          this.isBottom = true
        }else {
          if(this.isBottom) {
            this.release = true
            this.transition = 'transform 0.3s ease'
            this.setTransform(0)
          }
        }
      },
      touchend() {
        if (this.moving) {
          if(this.release) {
            this.release = false
            this.moving = false
            this.isBottom = false
            return
          }
          
          this.runRefresh()
        }else {
          this.transition = 'transform 0.3s ease'
          this.setTransform(0)
        }
      },
      runRefresh() {
        this.transition = 'transform 0.3s ease'
        this.setTransform(this.refreshHeight)
        this.playState = true
        this.updating = true
        this.$emit('refresh')
      },
      setTransform(top) {
        if(top >= 0) {
          this.transform = `translateY(${top}px)`
        }
      },
      completed() {
        this.isBottom = false
        this.moving = false
        this.transition = 'transform 0.3s ease'
        this.setTransform(0)
        setTimeout(() => {
          this.playState = false
        }, 300)
        this.updating = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import  './index.scss';
</style>
